<template>
<div>
    <div class="common-form">
      <span>{{curItem.name}}</span>
    </div>
    <el-form size="small" :model="curItem" label-width="100px">
      <div class="f16 gray3 form-subtitle">{{$t('page.product_data')}}</div>
      <!--商品数量-->
      <div class="form-item">
        <div class="form-label">{{$t('page.product_count_label')}}</div>
        <el-slider
          v-model="curItem.params.showNum"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{$t('page.header_style')}}</div>
      <el-form-item :label="$t('page.title_type_label')">
        <el-radio-group v-model="curItem.style.titleType">
          <el-radio-button :label="1">{{$t('page.text_only')}}</el-radio-button>
          <el-radio-button :label="2">{{$t('page.image_only')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!--图片-->
      <el-form-item :label="$t('page.title_image_label')" v-if="curItem.style.titleType == 2">
        <div class="diy-special-cover">
          <img
            style="width: 220px"
            v-img-url="curItem.style.titleImage"
            alt=""
            @click="$parent.onEditorSelectImage(curItem.style, 'titleImage')"
          />
          <!-- <div class="gray9 f12">建议图片高度88px</div> -->
        </div>
      </el-form-item>
      <el-form-item :label="$t('page.title_text_label')" v-if="curItem.style.titleType == 1"
        ><el-input v-model="curItem.params.title" class="w-auto"></el-input
      ></el-form-item>
      <!--文字大小-->
      <div class="form-item" v-if="curItem.style.titleType == 1">
        <div class="form-label">{{$t('page.title_font_size_label')}}</div>
        <el-slider
          v-model="curItem.style.titleSize"
          :min="12"
          :max="24"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <div class="form-item" v-if="curItem.style.titleType == 1">
        <div class="form-label">{{$t('page.title_color_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.titleColor"
          ></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.titleColor" />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'titleColor', '#DDDDDD')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
      <el-form-item :label="$t('page.right_text_label')"
        ><el-input v-model="curItem.params.more" class="w-auto"></el-input
      ></el-form-item>
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{$t('page.right_text_style')}}</div>
      <!--文字大小-->
      <div class="form-item">
        <div class="form-label">{{$t('page.text_size_label')}}</div>
        <el-slider
          v-model="curItem.style.moreSize"
          :min="12"
          :max="40"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <div class="form-item">
        <div class="form-label">{{$t('page.text_color_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.moreColor"
          ></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.moreColor" />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'moreColor', '#DDDDDD')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{$t('page.content_display')}}</div>
      <!--商品名称-->
      <el-form-item :label="$t('page.product_name_label')">
        <el-radio-group v-model="curItem.style.productName">
          <el-radio-button :label="1">{{$t('page.show')}}</el-radio-button>
          <el-radio-button :label="2">{{$t('page.do_not_display')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!--销售价-->
      <el-form-item :label="$t('page.sale_price_label')">
        <el-radio-group v-model="curItem.style.productPrice">
          <el-radio-button :label="1">{{$t('page.show')}}</el-radio-button>
          <el-radio-button :label="2">{{$t('page.do_not_display')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!--划线价-->
      <el-form-item :label="$t('page.line_price_label')">
        <el-radio-group v-model="curItem.style.productLineprice">
          <el-radio-button :label="1">{{$t('page.show')}}</el-radio-button>
          <el-radio-button :label="2">{{$t('page.do_not_display')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!--划线价-->
      <el-form-item :label="$t('page.tag_label')">
        <el-radio-group v-model="curItem.style.productTag">
          <el-radio-button :label="1">{{$t('page.show')}}</el-radio-button>
          <el-radio-button :label="2">{{$t('page.do_not_display')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{$t('page.header_style_section')}}</div>
      <el-form-item :label="$t('page.background_image_label')">
        <div class="diy-special-cover">
          <img
            style="width: 220px"
            v-img-url="curItem.style.bgimage"
            alt=""
            @click="$parent.onEditorSelectImage(curItem.style, 'bgimage')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'bgimage', '')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
          <div class="gray9 f12"> {{$t('page.header_image_tip')}} 

</div>
        </div>
      </el-form-item>
      <!--组件样式-->
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{$t('page.product_style')}}</div>
      <!--图片圆角-->
      <div class="form-item">
        <div class="form-label">{{$t('page.image_radius_label')}}</div>
        <el-slider
          v-model="curItem.style.productImgRadio"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <div class="form-item">
        <div class="form-label">{{$t('page.product_bg_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.productBgColor"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.productBgColor"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'productBgColor', '')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
      <!--商品上圆角-->
      <div class="form-item">
        <div class="form-label">{{$t('page.border_radius_top_label')}}</div>
        <el-slider
          v-model="curItem.style.productTopRadio"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <!--商品下圆角-->
      <div class="form-item">
        <div class="form-label">{{$t('page.border_radius_bottom_label')}}</div>
        <el-slider
          v-model="curItem.style.productBottomRadio"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <div class="form-item" v-if="curItem.style.productName">
        <div class="form-label">{{$t('page.product_name_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.productNameColor"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.productNameColor"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'productNameColor', '#333333')"






            type="primary"
            link
          > {{$t('page.reset')}} 

</el-button>
        </div>
      </div>
      <div class="form-item" v-if="curItem.style.productPrice">
        <div class="form-label">{{$t('page.sale_price_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.productPriceColor"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.productPriceColor"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'productPriceColor', '#FF4C01')"






            type="primary"
            link
          > {{$t('page.reset')}} 

</el-button>
        </div>
      </div>
      <div class="form-item" v-if="curItem.style.productLineprice">
        <div class="form-label">{{$t('page.line_price_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.productLineColor"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.productLineColor"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'productLineColor', '#999999')"






            type="primary"
            link
          > {{$t('page.reset')}} 

</el-button>
        </div>
      </div>
      <div class="form-item" v-if="curItem.style.productTag">
        <div class="form-label">{{$t('page.tag_color')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.tagColor"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.tagColor"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'tagColor', '#999999')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
      <div class="form-item" v-if="curItem.style.productTag">
        <div class="form-label">{{$t('page.tag_background')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.bgTag"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.bgTag"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'bgTag', '#999999')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
      <!--组件样式-->
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{$t('page.component_style')}}</div>
      <!--上下边距-->
      <div class="form-item">
        <div class="form-label">{{$t('page.margin_top_label')}}</div>
        <el-slider
          v-model="curItem.style.paddingTop"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <!--上下边距-->
      <div class="form-item">
        <div class="form-label">{{$t('page.margin_bottom_label')}}</div>
        <el-slider
          v-model="curItem.style.paddingBottom"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <!--左右边距-->
      <div class="form-item">
        <div class="form-label">{{$t('page.margin_lr_label')}}</div>
        <el-slider
          v-model="curItem.style.paddingLeft"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <!--上圆角-->
      <div class="form-item">
        <div class="form-label">{{$t('page.border_radius_top_label')}}</div>
        <el-slider
          v-model="curItem.style.topRadio"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <!--下圆角-->
      <div class="form-item">
        <div class="form-label">{{$t('page.border_radius_bottom_label')}}</div>
        <el-slider
          v-model="curItem.style.bottomRadio"
          size="small"
          show-input
          :show-input-controls="false"
          input-size="small"
        ></el-slider>
      </div>
      <div class="form-item">
        <div class="form-label">{{$t('page.footer_bg_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.bgcolor"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.bgcolor"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'bgcolor', '')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
      <div class="form-item">
        <div class="form-label">{{$t('page.component_bg_label')}}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker
            size="default"
            v-model="curItem.style.background"
          ></el-color-picker>
          <el-input
            class="ml10"
            v-model="curItem.style.background"
            :placeholder="$t('page.transparent')"
          />
          <el-button
            style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'background', '#ffffff')"


            type="primary"
            link
            >{{$t('page.reset')}}</el-button
          >
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["curItem", "selectedIndex"],
  created() {},
  methods: {}
};
</script>

